//LiuZh 2017-05-17
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  Dimensions,
  Modal,
  TouchableHighlight
} from 'react-native';



let backImgSrc = require('../../img/back_white.png');
let  winWidth = Dimensions.get("window").width;






/*
 
						<Image style={styles.back} 
							resizeMode={'contain'}
							source={backImgSrc}/> 
*/

export default class Toolbar extends Component{

	constructor(props){
		super(props);
		
	}

render() {
		let bgColor = this.props.backgroundColor;
		return (
			<View style={[styles.box, bgColor ? {backgroundColor: bgColor, borderColor: bgColor} :{}]}>
			{this.props.needBack ?
				<TouchableOpacity
					onPress={this.props.goBack?this.props.goBack: this.pressBack}
					style={{height:50,width:50,flexDirection:"row",justifyContent: 'flex-start',alignItems:'center',position:'absolute',left:0,top:0}}>
					<Image style={styles.back} 
							resizeMode={'contain'}
							source={backImgSrc}/>
				</TouchableOpacity> :
				<View />}
				<View style={{flexDirection:"row",justifyContent:"center"}}>
				<Text style={[styles.text, this.props.textColor ? {color: this.props.textColor} : {}]} >{this.props.text}</Text>
				
				</View>
			</View>
		)
	}

	pressBack = () => {
		this.props.navigation.goBack();
	}




	pressVideo = () => {
		this.props.navigation.navigate('Video');
	}

	

}

const styles = StyleSheet.create({
	box: {
		height: 50,
		justifyContent: 'center',
		alignItems: 'center',
		borderBottomWidth: 0.5,
		borderColor: '#DDDDDD',
		backgroundColor:'#38373d',
		flexDirection: 'row',
		marginTop:0,
	//	flex:1,
	},
	back: {
		height: 20,
		width: 20,

	},
	text: {
		alignSelf:"center",
		color:'#ffffff'
		//marginLeft:winWidth/2-20,
	}
});